HOW to use Dioxus Components?

[hyxdxhb123]

How to use Dioxus components? When I use the demo code
`// demo.rs
use super::super::component::;
use dioxus::prelude::;

#[component]
pub fn Demo() -> Element {
rsx! {
div { display: "flex", flex_direction: "column", gap: "0.5rem",
Button { "Primary" }

        Button { variant: ButtonVariant::Secondary, "Secondary" }

        Button { variant: ButtonVariant::Destructive, "Destructive" }

        Button { variant: ButtonVariant::Outline, "Outline" }

        Button { variant: ButtonVariant::Ghost, "Ghost" }
    }
}

}`

, my VSCode displays the following issues/problems:

[{ "resource": "/f:/rust_prjs/hot_dog/src/main.rs", "owner": "rustc", "code": { "value": "Click for full compiler diagnostic", "target": { "$mid": 1, "path": "/diagnostic message [0]", "scheme": "rust-analyzer-diagnostics-view", "query": "0", "fragment": "file:///f%3A/rust_prjs/hot_dog/src/main.rs" } }, "severity": 8, "message": "cannot find value variantin moduledioxus_elements::button\nnot found in dioxus_elements::button", "source": "rustc", "startLineNumber": 14, "startColumn": 22, "endLineNumber": 14, "endColumn": 29, "modelVersionId": 141, "origin": "extHost1" },{ "resource": "/f:/rust_prjs/hot_dog/src/main.rs", "owner": "rustc", "code": { "value": "Click for full compiler diagnostic", "target": { "$mid": 1, "path": "/diagnostic message [4]", "scheme": "rust-analyzer-diagnostics-view", "query": "4", "fragment": "file:///f%3A/rust_prjs/hot_dog/src/main.rs" } }, "severity": 8, "message": "failed to resolve: use of undeclared type ButtonVariant\nuse of undeclared type ButtonVariant", "source": "rustc", "startLineNumber": 14, "startColumn": 31, "endLineNumber": 14, "endColumn": 44, "modelVersionId": 141, "origin": "extHost1" },{ "resource": "/f:/rust_prjs/hot_dog/src/main.rs", "owner": "rustc", "code": { "value": "Click for full compiler diagnostic", "target": { "$mid": 1, "path": "/diagnostic message [1]", "scheme": "rust-analyzer-diagnostics-view", "query": "1", "fragment": "file:///f%3A/rust_prjs/hot_dog/src/main.rs" } }, "severity": 8, "message": "cannot find value variantin moduledioxus_elements::button\nnot found in dioxus_elements::button", "source": "rustc", "startLineNumber": 16, "startColumn": 22, "endLineNumber": 16, "endColumn": 29, "modelVersionId": 141, "origin": "extHost1" },{ "resource": "/f:/rust_prjs/hot_dog/src/main.rs", "owner": "rustc", "code": { "value": "Click for full compiler diagnostic", "target": { "$mid": 1, "path": "/diagnostic message [5]", "scheme": "rust-analyzer-diagnostics-view", "query": "5", "fragment": "file:///f%3A/rust_prjs/hot_dog/src/main.rs" } }, "severity": 8, "message": "failed to resolve: use of undeclared type ButtonVariant\nuse of undeclared type ButtonVariant", "source": "rustc", "startLineNumber": 16, "startColumn": 31, "endLineNumber": 16, "endColumn": 44, "modelVersionId": 141, "origin": "extHost1" },{ "resource": "/f:/rust_prjs/hot_dog/src/main.rs", "owner": "rustc", "code": { "value": "Click for full compiler diagnostic", "target": { "$mid": 1, "path": "/diagnostic message [2]", "scheme": "rust-analyzer-diagnostics-view", "query": "2", "fragment": "file:///f%3A/rust_prjs/hot_dog/src/main.rs" } }, "severity": 8, "message": "cannot find value variantin moduledioxus_elements::button\nnot found in dioxus_elements::button", "source": "rustc", "startLineNumber": 18, "startColumn": 22, "endLineNumber": 18, "endColumn": 29, "modelVersionId": 141, "origin": "extHost1" },{ "resource": "/f:/rust_prjs/hot_dog/src/main.rs", "owner": "rustc", "code": { "value": "Click for full compiler diagnostic", "target": { "$mid": 1, "path": "/diagnostic message [6]", "scheme": "rust-analyzer-diagnostics-view", "query": "6", "fragment": "file:///f%3A/rust_prjs/hot_dog/src/main.rs" } }, "severity": 8, "message": "failed to resolve: use of undeclared type ButtonVariant\nuse of undeclared type ButtonVariant", "source": "rustc", "startLineNumber": 18, "startColumn": 31, "endLineNumber": 18, "endColumn": 44, "modelVersionId": 141, "origin": "extHost1" },{ "resource": "/f:/rust_prjs/hot_dog/src/main.rs", "owner": "rustc", "code": { "value": "Click for full compiler diagnostic", "target": { "$mid": 1, "path": "/diagnostic message [3]", "scheme": "rust-analyzer-diagnostics-view", "query": "3", "fragment": "file:///f%3A/rust_prjs/hot_dog/src/main.rs" } }, "severity": 8, "message": "cannot find value variantin moduledioxus_elements::button\nnot found in dioxus_elements::button", "source": "rustc", "startLineNumber": 20, "startColumn": 22, "endLineNumber": 20, "endColumn": 29, "modelVersionId": 141, "origin": "extHost1" },{ "resource": "/f:/rust_prjs/hot_dog/src/main.rs", "owner": "rustc", "code": { "value": "Click for full compiler diagnostic", "target": { "$mid": 1, "path": "/diagnostic message [7]", "scheme": "rust-analyzer-diagnostics-view", "query": "7", "fragment": "file:///f%3A/rust_prjs/hot_dog/src/main.rs" } }, "severity": 8, "message": "failed to resolve: use of undeclared type ButtonVariant\nuse of undeclared type ButtonVariant", "source": "rustc", "startLineNumber": 20, "startColumn": 31, "endLineNumber": 20, "endColumn": 44, "modelVersionId": 141, "origin": "extHost1" }]

here are my code
`
use dioxus::prelude::*;

fn main() {
dioxus::launch(App);
}

#[component]
fn App() -> Element {
rsx! {
div { display: "flex", flex_direction: "column", gap: "0.5rem",
button { "Primary" }

        button { variant: ButtonVariant::Secondary, "Secondary" }

        button { variant: ButtonVariant::Destructive, "Destructive" }

        button { variant: ButtonVariant::Outline, "Outline" }

        button { variant: ButtonVariant::Ghost, "Ghost" }
    }

}

}

`

[nerjs]

The errors are quite specific and clear:

1. The button component doesn't have a variant
2. The ButtonVariant type is unknown. This isn't even related to Dioxus - it's more about basic Rust.

In your code, you are using button (with a lowercase 'b'). This is a built-in HTML element from Dioxus, and it does not have a variant attribute. Also, I don't see that you have imported the necessary component.