# PopConfirm
**Also known as:** Popconfirm, ConfirmPopover, ConfirmPopup
## Description
BitPopConfirm asks for a confirmation right where an action is triggered: a small popup anchored to the trigger, with a question and the two buttons that answer it, for the actions worth a second thought that are not worth a modal dialog.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| CancelText | `string?` | null | The text of the Cancel button. Default: Cancel. |
| ChildContent | `RenderFragment?` | null | The trigger the popup is anchored to and opened from, a button most of the time. |
| Classes | `BitPopConfirmClassStyles?` | null | Custom CSS classes for the different parts of the pop confirm. |
| ConfirmColor | `BitColor?` | null | The color of the Confirm button, Error for an action that destroys something. Default: the color of a button left without one (Primary). |
| ConfirmText | `string?` | null | The text of the Confirm button. Default: Ok. |
| IsOpen | `bool` | false | Whether the popup is open. Two-way bindable; opening or closing it through this parameter raises neither OnConfirm nor OnCancel. |
| Message | `string?` | null | The question the popup asks, or what it explains under the title. The popup is described by it, or named by it where there is no Title. |
| OnCancel | `EventCallback` | | The callback for when the question is answered with no: the Cancel button, Escape, or a click outside of the popup. |
| OnConfirm | `EventCallback` | | The callback for when the question is answered with yes, through the Confirm button. It is raised once the popup has closed. |
| Placement | `BitPlacement?` | null | The side of the trigger the popup is placed on: Top, Bottom, Start or End, or one of their corner variants (TopStart, BottomEnd, ...). By default it takes the side with the most room. |
| Styles | `BitPopConfirmClassStyles?` | null | Custom CSS styles for the different parts of the pop confirm. |
| Title | `string?` | null | The title of the popup, which names it. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| Disabled | `bool` | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitPlacement Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Top | 0 | The top edge. |
| Bottom | 1 | The bottom edge. |
| Start | 2 | The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top. |
| End | 3 | The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom. |
| Left | 4 | The left edge, in both reading directions. |
| Right | 5 | The right edge, in both reading directions. |
| Center | 6 | The middle of the axis, against neither edge. |
| TopAndBottom | 7 | Both edges of the block axis at once. |
| StartAndEnd | 8 | Both edges of the inline axis at once, following the reading direction the way Start and End do. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitPopConfirmClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitPopConfirm, which holds the trigger. |
| Callout | `string?` | null | Custom CSS classes/styles for the popup of the BitPopConfirm. |
| Container | `string?` | null | Custom CSS classes/styles for the container of the content of the popup of the BitPopConfirm. |
| Title | `string?` | null | Custom CSS classes/styles for the title of the BitPopConfirm. |
| Message | `string?` | null | Custom CSS classes/styles for the message of the BitPopConfirm. |
| Actions | `string?` | null | Custom CSS classes/styles for the container of the buttons of the BitPopConfirm. |
| CancelButton | `string?` | null | Custom CSS classes/styles for the Cancel button of the BitPopConfirm. |
| ConfirmButton | `string?` | null | Custom CSS classes/styles for the Confirm button of the BitPopConfirm. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-PopConfirm-max-width` | spacing(40) | Width the popup stops growing at, the message wrapping inside. |
| `--bit-PopConfirm-padding` | spacing(1.5) | Inset of the content of the popup. |
| `--bit-PopConfirm-gap` | spacing(1) | Room between the title, the message and the buttons. |
| `--bit-PopConfirm-title-color` | var(--bit-clr-fg-pri) | Color of the title. |
| `--bit-PopConfirm-message-color` | var(--bit-clr-fg-sec) | Color of the message. |
| `--bit-PopConfirm-actions-gap` | spacing(1) | Room between the two buttons. |
## Examples
\n**Basic**:
```razor
Delete
Discard
```
\n**Button texts**:
```razor
Leave
```
\n**Placement**:
```razor
Top
Bottom
Start
End
```
\n**Binding**:
```razor
Archive
Ask from here
IsOpen: @isBoundOpen
```
```csharp
private bool isBoundOpen;
```
\n**Disabled**:
```razor
Delete
```
\n**Color**:
```razor
Delete account
Styles
Classes
```
\n**RTL**:
```razor
حذف
```
Answer: @basicAnswer
```
```csharp
private string? basicAnswer;
```
\n**Message only**:
```razor
Deleted: @accountDeleted
```
```csharp
private bool accountDeleted;
```
\n**Style & Class**:
```razor